<template>

    <div>
        <el-row :gutter="20">
            <el-col :span="8">
                <el-col :span="18">
                    <el-input v-model="userInfo.fileNumber" placeholder="请输入档案号"></el-input>
                </el-col>
                <el-col :span="6">
                    <el-button type="primary" @click="searchSubscribe()">查询</el-button>
                </el-col>
            </el-col>
            <el-col :span="8">
                <el-col :span="18">
                    <el-input v-model.number="userInfo.memberPhone" placeholder="请输入手机号"></el-input>
                </el-col>
                <el-col :span="6">
                    <el-button type="primary" @click="searchSubscribe()">查询</el-button>
                </el-col>
            </el-col>
            <el-col :span="8">
                <el-col :span="18">
                    <el-input v-model="userInfo.memberName" placeholder="请输入姓名"></el-input>
                </el-col>
                <el-col :span="6">
                    <el-button type="primary" @click="searchSubscribe()">查询</el-button>
                </el-col>
            </el-col>
        </el-row>
        <el-button type="primary" class='addSubscribeListItem' @click="addSubscribe()">新增</el-button>
        <el-table :data="subscribeTable" style="width: 100%; text-align: center; "
            :header-cell-style="{ 'background-color': 'rgb(39,49,70)', 'text-align': 'center', 'color': 'white' }"
            :cell-style="{ 'text-align': 'center' }">
            <el-table-column prop="id" label="编号">
            </el-table-column>
            <el-table-column prop="created" label="预约日期">
            </el-table-column>
            <el-table-column prop="fileNumber" label="档案号">
            </el-table-column>
            <el-table-column prop="meberName" label="姓名">
            </el-table-column>
            <el-table-column prop="memberPhone" label="手机号码">
            </el-table-column>
            <el-table-column prop="appointmentType" label="预约类型">
            </el-table-column>
            <el-table-column prop="packageName" label="预约套餐">
            </el-table-column>
            <el-table-column prop="deleted" label="预约状态">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope='scope'>
                    <el-button size="mini" type="danger" @click="deleteSubscribe(scope.row.id)">取消预约</el-button>
                </template>
            </el-table-column>
        </el-table>
        <paging :total="total" :userInfo="userInfo"></paging>
        <!-- 新增模态框 -->
        <el-dialog title="添加预约项" :visible.sync="addSubscribeFormVisible" width="70%">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"
                style="width:40%;float:left">
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="身份证" prop="idCard">
                    <el-input v-model="ruleForm.idCard"></el-input>
                </el-form-item>

                <el-form-item label="出生日期" prop="birthday">
                    <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.birthday" style="width: 100%;"
                        value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="手机号" prop="tel">
                    <el-input v-model="ruleForm.tel"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-radio-group v-model="ruleForm.sex">
                        <el-radio label="男"></el-radio>
                        <el-radio label="女"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="年龄" prop="age">
                    <el-input v-model="ruleForm.age"></el-input>
                </el-form-item>
                <el-form-item label="婚姻状态" prop="maritalStatus">
                    <el-radio-group v-model="ruleForm.maritalStatus">
                        <el-radio label="已婚"></el-radio>
                        <el-radio label="未婚"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="预约套餐" prop="packageId">
                    <el-input v-model.number="ruleForm.packageId" readonly></el-input>
                </el-form-item>

                <el-form-item label="预约时间" prop="created">
                    <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.created" style="width: 100%;"
                        value-format="yyyy-MM-dd" :picker-options="pickerOptions">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <div class="packageTable" style="width: 50%;float:right">
                <el-input v-model="userInfo2.packageName" placeholder="请输入套餐" style="width: 40%"></el-input>
                <el-button type="primary" @click="seachPackage()">查询</el-button>
                <el-table ref="multipleTable" :data="packageTable" tooltip-effect="dark"
                    :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }"
                    @selection-change="selectionLineChangeHandle">
                    <el-table-column type="selection">
                    </el-table-column>
                    <el-table-column prop="packageName" label="套餐名称">
                    </el-table-column>
                    <el-table-column prop="applicablePeople" label="适用人群">
                    </el-table-column>
                    <el-table-column prop="packageIntroduction" label="套餐介绍">
                    </el-table-column>
                </el-table>
                <div class="block">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="userInfo2.page" :page-sizes="[10, 15, 20, 25]" :page-size="userInfo2.limit"
                        layout="total, sizes, prev, pager, next, jumper" :total="total2">
                    </el-pagination>
                </div>
            </div>
            <div slot="footer" class="dialog-footer" style="width: 100%;float:right">
                <el-button @click="addSubscribeFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import paging from '../../components/book/paging.vue'
import moment from "moment";
export default {
    data() {
        return {
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() < Date.now();
                },
            },
            total: 0,
            total2: 0,
            subscribeTable: [{
            }],
            dataonLineListSelections: [],
            userInfo: {
                "limit": 5,
                "memberName": "",
                "fileNumber": "",
                "memberPhone": '',
                "page": 1
            },
            userInfo2: {
                "limit": 10,
                "packageName": "",
                "page": 1
            },
            // input: '',
            addSubscribeFormVisible: false,
            ruleForm: {
                memberName: '',
                memberFileNumber: '',
                idCard: '',
                birthday: '',
                tel: '',
                sex: '',
                age: '',
                maritalStatus: '',
                packageId: '',
                created: ''
            },
            rules: {
                name: [
                    { message: '请输入姓名', trigger: 'blur' },
                    { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
                ],
                idCard: [
                    { required: true, message: "请输入身份证号", trigger: "blur" },
                    { pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/, message: "请输入合法身份证号", trigger: "blur" }
                ],
                birthday: [
                    { message: '请选择日期', trigger: 'change' }
                ],
                tel: [
                    { message: "请输入手机号", trigger: "blur" },
                    // 这个只能验证手机号
                    // { pattern:/^0{0,1}(13[0-9]|15[7-9]|153|156|18[7-9])[0-9]{8}$/, message: "请输入合法手机号", trigger: "blur" }
                    { pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/, message: "请输入合法手机号/电话号", trigger: "blur" }
                ],
                sex: [
                    { message: '请选择性别', trigger: 'change' }
                ],
                age: [
                    { message: '请输入年龄', trigger: 'change' }
                ],
                maritalStatus: [
                    { message: '请选择婚姻状态', trigger: 'blur' }
                ],
                created: [
                    { required: true, message: '请输入预约时间', trigger: 'blur' }
                ],
                packageId: [
                    { required: true, message: '请选择套餐', trigger: 'blur' }
                ]
            },
            packageTable: [{}],
        };
    },
    components: {
        paging,
    },
    methods: {
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.userInfo.limit = val
            this.getSubscribePackageAll()

        },
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.userInfo.page = val;
            this.getSubscribePackageAll()

        },
        selectionLineChangeHandle(val) {
            this.dataonLineListSelections = val
            // console.log(this.dataonLineListSelections);
            this.ruleForm.packageId = ''
            for (var i = 0; i < this.dataonLineListSelections.length; i++) {
                this.ruleForm.packageId += this.dataonLineListSelections[i].id
                // console.log('id:' + this.dataonLineListSelections[i].id)
            }
        },

        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$axios({
                        method: "post",
                        url: "/reservationlist/selectlist",
                        data: {
                            memberId: this.ruleForm.idCard
                        },
                    })
                        .then(res => {
                            if (res.code === 0) {
                                if (res.data !== null) {
                                    // console.log(res.data)
                                    let fileNumber = res.data.fileNumber
                                    this.$axios({
                                        method: "post",
                                        url: "/reservationlist/add",
                                        data: {
                                            created: this.ruleForm.created,
                                            memberFileNumber: fileNumber,
                                            packageId: this.ruleForm.packageId,
                                        },
                                    })
                                        .then(res => {
                                            if (res.code === 0) {
                                                this.getAll()
                                                this.addSubscribeFormVisible = false;
                                            } else {
                                            }
                                        })
                                }
                                // console.log(res.data)

                            } else {
                                // console.log('请先注册会员')
                            }
                        })
                } else {
                    // console.log('error submit!!');
                    return false;
                }
            });
        },
        // 新增预约按钮
        addSubscribe() {
            this.addSubscribeFormVisible = true;
            this.getSubscribePackageAll();
        },
        // 新增中的套餐表格渲染
        getSubscribePackageAll() {
            this.$axios({
                method: "post",
                url: "/packagemanagement/list",
                data: this.userInfo2,
            })
                .then(res => {
                    if (res.code === 0) {
                        this.packageTable = res.data;
                        this.total2 = res.count;
                        // console.log(res.data)
                    } else {
                    }
                })
        },
        // 查询
        searchSubscribe() {
            // console.log(typeof(this.userInfo.memberPhone))
            this.$axios({
                method: "post",
                url: "/reservationlist/list",
                data: this.userInfo,
            })
                .then(res => {
                    if (res.code === 0) {
                        this.subscribeTable = res.data;
                        for (let i = 0; i < res.data.length; i++) {
                            this.subscribeTable[i].created = moment(res.data[i]).format("YYYY-MM-DD");
                            // console.log(res.data)
                        }
                    } else {

                    }
                })
        },
        // 取消预约
        deleteSubscribe(id) {
            // console.log(id)
            const confirmResult = this.$confirm('此操作将永久删除该预约信息, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then((res) => {
                    this.$axios({
                        method: "post",
                        url: "/reservationlist/deleted",
                        data: id,
                        headers: {
                            'Content-Type': 'application/json'
                        }
                    })
                        .then(res => {
                            if (res.code === 0) {
                                this.getAll();
                                this.$message.success("删除预约成功！")
                            } else {
                                this.$message.error("删除预约失败！")
                            }
                        })
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
        },
        // 新增模态框中查询套餐
        seachPackage() {
            this.$axios({
                method: "post",
                url: "/reservationlist/selectpackagelist",
                data: this.userInfo2,
            })
                .then(res => {
                    if (res.code === 0) {
                        this.packageTable = res.data.records;
                        // console.log(res.data.records)
                    } else {

                    }
                })
        },
        // 渲染表格数据
        getAll() {
            this.$axios({
                method: "post",
                url: "/reservationlist/list",
                data: this.userInfo,
            })
                .then(res => {
                    if (res.code === 0) {
                        this.subscribeTable = res.data;
                        this.total = res.count;
                        // console.log(res.data)
                        for (let i = 0; i < res.data.length; i++) {
                            this.subscribeTable[i].created = moment(res.data[i]).format("YYYY-MM-DD");

                            if (res.data[i].appointmentType == 0) {
                                this.subscribeTable[i].appointmentType = '人工预约';
                            } else {
                                this.subscribeTable[i].appointmentType = '微信预约';
                            }
                            if (res.data[i].deleted == 0) {
                                this.subscribeTable[i].deleted = '已预约';
                            } else {
                                this.subscribeTable[i].deleted = '未预约';
                            }

                        }
                    } else {

                    }
                })
        },
        // 实现自动生成生日，性别，年龄
        // idCardRules() {
        //     console.log(1111)
        //     let reg = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/;
        //     if (reg.test(this.ruleForm.idCard)) {
        //         let iden = this.ruleForm.idCard;
        //         let sex = null;
        //         let birth = null;
        //         let myDate = new Date();
        //         let month = myDate.getMonth() + 1;
        //         let day = myDate.getDate();
        //         let age = 0;
        //         age = myDate.getFullYear() - iden.substring(6, 10) - 1;
        //         sex = iden.substring(16, 17);
        //         birth = iden.substring(6, 10) + "-" + iden.substring(10, 12) + "-" + iden.substring(12, 14);
        //         if (iden.substring(10, 12) < month || iden.substring(10, 12) == month && iden.substring(12, 14) <= day) age++;
        //         if (sex % 2 === 0)
        //             sex = '0';
        //         else
        //             sex = '1';
        //         //性别  ==> 1:男       0:女
        //         // this.form.sex = sex;
        //         this.ruleForm.age = age;
        //         this.ruleForm.birthday = birth;
        //         console.log(this.ruleForm.age);
        //         console.log(this.ruleForm.birthday);

        //     }
        // },
    },
    created() {
        this.getAll();
    },
};
</script>

<style scoped>
.addSubscribeListItem {
    margin: 30px 0;

}

.el-dialog {
    overflow: hidden;
    position: relative;
}

.packageTable>.el-button {
    margin-left: 10px;
}

.packageTable>.el-table {
    margin-top: 20px;
}

.dialog-footer {
    margin: 20px;
}

.el-dialog .paging {
    position: absolute;
    top: 10px;

}

.search {
    padding-left: 0;
    float: left;
}
</style>